<template>
	<view>
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="5000" duration="500">
			<swiper-item v-for="(item,index) in goods.pic" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="bg-white padding">
			<view class="margin-bottom">{{goods.title}}</view>
			<view class="text-price text-red text-xxl">{{goods.price}}</view>
		</view>
		<view class="bg-white padding-lr margin-top">
			<view class="flex padding-top">
				<view class="text-gray margin-right-sm">类型</view>
				<view class="flex-1">{{goods.type}}</view>
			</view>
			<view class="flex padding-top">
				<view class="text-gray margin-right-sm">属性</view>
				<view class="flex-1">{{goods.property}}</view>
			</view>
			<view class="flex padding-tb">
				<view class="text-gray margin-right-sm">描述</view>
				<view class="flex-1">{{goods.content}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsApi from "@/api/goods";
	export default {
		data() {
			return {
				goods: {},
			}
		},
		onLoad: function(option) {
			this.loadData(option.id)
		},
		methods: {
			loadData(id) {
				GoodsApi.get(id).then((res) => {
					this.goods = res;
				})
			},
		}
	}
</script>

<style>

</style>
